<@c.html>
<div class="panel panel-_default">
    <div class="panel-heading">
        <h1 class="panel-title" style="font-size: 28px;">
            <a href="./listView">
                <i class="glyphicon glyphicon-chevron-left" style="border: 2px solid #1D2939;border-radius: 50px;font-size: 28px;"></i>
            </a>
            Table
        </h1>
    </div>
    <div class="panel-body">
        <div class="row">
            <form class="form-inline" id="form-table">
                <input name="id" type="hidden" value="${id!""}"/>
                <div class="form-group">
                    <label class="control-label col-sm-3">name</label>
                    <div class="col-sm-6">
                        <input class="form-control" type="text" id="name" name="name"/>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-3">comment</label>
                    <div class="col-sm-6">
                        <input class="form-control" type="text" id="comment" name="comment"/>
                    </div>
                </div>
            </form>
        </div>


        <div class="row">
            <button class="btn btn-primary" id="btn-add">Add</button>
            <button class="btn btn-primary" id="btn-delete">delete</button>
        </div>
        <table class="table table-striped form-group">
            <thead>
            <tr>
                <td>option</td>
                <td>name</td>
                <td>comment</td>
                <td>maxLength</td>
                <td>_default</td>
                <td>javaType</td>
                <td>uq</td>
                <td>nullable</td>
                <td>formShow</td>
                <td>listShow</td>
                <td>ctrlType</td>
                <td>link</td>
                <td>query</td>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
        <div class="row text-center">
            <button class="btn btn-primary" id="btn-save">save</button>
        </div>
    </div>
</div>
</@c.html>
<script type="application/javascript">
    $(function(){
        $('#btn-add').click(function(){
            $('table tbody').append($(`<tr>
							<td><input class="form-control" type="checkbox" name="option"/></td>
							<td><input class="form-control" name="name"/></td>
							<td><input class="form-control" name="comment"/></td>
							<td><input class="form-control" type="number" name="maxLength"/></td>
							<td><input class="form-control" name="_default"/></td>
							<td>
								<select class="form-control" name="javaType">
									<option>String</option>
									<option>Integer</option>
									<option>Double</option>
									<option>Date</option>
									<option>Boolean</option>
								</select>
							</td>
							<td><input class="form-control" type="checkbox" name="uq"/></td>
							<td><input class="form-control" type="checkbox" name="nullable"/></td>
							<td><input class="form-control" type="checkbox" name="formShow"/></td>
							<td><input class="form-control" type="checkbox" name="listShow"/></td>
							<td>
								<select class="form-control" name="ctrlType">
									<option>text</option>
									<option>password</option>
									<option>select</option>
									<option>radio</option>
									<option>datetime</option>
									<option>image</option>
									<option>file</option>
									<option>textarea</option>
									<option>ckeditor</option>
								</select>
							</td>
							<td><input class="form-control" name="link"/></td>
							<td><input class="form-control" type="checkbox" name="query"/></td>
						</tr>`));
        });
        $('#btn-delete').click(function(){
            $('table tbody tr').each(function(){
                if($(this).find('input[type="checkbox"]').eq(0).is(':checked')){
                    $(this).remove();
                }
            });
        });
        $('#btn-save').click(function(){
            var jsonData = {"jeecgColumnList":[]};
            $('table tbody tr').each(function(){
                var tr_data = {};

                tr_data.name        = $(this).find('*[name="name"]').val();
                tr_data.comment     = $(this).find('*[name="comment"]').val();
                tr_data.maxLength   = $(this).find('*[name="maxLength"]').val();
                tr_data._default    = $(this).find('*[name="_default"]').val();
                tr_data.javaType    = $(this).find('*[name="javaType"]').val();
                tr_data.uq          = $(this).find('*[name="uq"]').is(':checked');
                tr_data.nullable    = $(this).find('*[name="nullable"]').is(':checked');
                tr_data.formShow    = $(this).find('*[name="formShow"]').is(':checked');
                tr_data.listShow    = $(this).find('*[name="listShow"]').is(':checked');
                tr_data.ctrlType    = $(this).find('*[name="ctrlType"]').val();
                tr_data.link        = $(this).find('*[name="link"]').val();
                tr_data.query     = $(this).find('*[name="query"]').is(':checked');

                jsonData.jeecgColumnList.push(tr_data);
            });
            jsonData.id = $('#form-table').find('*[name="id"]').val();
            jsonData.name = $('#form-table').find('*[name="name"]').val();
            jsonData.comment = $('#form-table').find('*[name="comment"]').val();

            $.ajax({
                type : "post",
                url : '.',
                contentType:"json",
                headers: {"Content-Type":"application/json"},
                data: JSON.stringify(jsonData),
                success:function (result) {
                    console.log(result);
                    window.location.href = './listView';
                },
                error:function(xmlHttpRequest , message,  error){
                    bootbox.alert("error");
                    console.log(message);
                }
            });

            console.log(jsonData);
        });

        <#if id??>
            $.getJSON("./${id}", function(data){
                loadForm($("#form-table"), data);
                $.each(data.jeecgColumnList, function(i, column){
                    $('#btn-add').trigger("click");
                    loadForm($('table tbody tr').last(), column);
                });
            });
        </#if>

        function loadForm($form, data){
            for(var name in data){
                if(true === data[name]){
                    $form.find('*[name="' + name + '"]').attr("checked","true");
                }else{
                    $form.find('*[name="' + name + '"]').val(data[name]);
                }
            }
        }
    })
</script>